<template>
  <div class="alone-outBox f14">
    <div class="alone-topBox mb16">
      <div class="flex flex-warp flex_bt">
        <div class="flex flex-warp" style="align-items:center">
          <div class="mb16">
            <span>会议名称：</span>
            <el-input v-model="searchObj.title" placeholder="请输入会议名称" class="width200 mr16" />
          </div>
          <div class="mb16 mr16">
            <span>行业分类：</span>
            <el-select v-model="searchObj.industryId" placeholder="请选择" class="width200" clearable>
              <el-option v-for="item in industryData" :key="item.name" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>原理分类：</span>
            <el-select v-model="searchObj.immsortId" placeholder="请选择" class="width200" clearable>
              <el-option v-for="item in immsortData" :key="item.name" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>会议等级：</span>
            <el-select v-model="searchObj.meetSponsorType" placeholder="请选择" class="width200" clearable>
              <el-option v-for="item in meetSponsorTypeData" :key="item.name" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="mb20">
            <el-button @click="React">重置</el-button>
            <el-button type="primary" @click="SearchListBt">筛选</el-button>
          </div>
        </div>
        <div>

        </div>
      </div>
    </div>

    <div class="tableBox">
      <!-- 表格 -->
      <el-table v-loading="loading" :data="DataTable" style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="mid" min-width="80" label="编号" align="left" />
        <el-table-column prop="title" min-width="300" label="会议名称" align="left">
          <template slot-scope="scope">
            <el-link type="primary" v-if="scope.row.shortName != '' && scope.row.shortName != null" :href="scope.row.pcUrl"
              target="_blank">{{ scope.row.title }}</el-link>
            <div v-else>{{ scope.row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="startTime2" min-width="150" label="开始时间" align="left" />
        <el-table-column prop="meetSponsorType" min-width="100" label="会仪等级" align="left" />
        <el-table-column prop="djs" min-width="100" label="倒计时" align="left" />
        <el-table-column prop="industryName" min-width="150" label="行业分类" align="left" />
        <el-table-column prop="immsortName" min-width="150" label="原理分类" align="left" />
        <el-table-column label="操作" align="center" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isZz != '倒计时已结束' && scope.row.meetSponsorType != '--'" type="text" class="mr10"
              @click="goSupport(scope.row)">立即赞助</el-button>
              <el-button v-if="scope.row.hasInvitationLetters>0"  type="text" class="mr10"
              @click="downloadZSH(scope.row)">下载招商函</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="alignRight">
        <Pagination :total="total" :page="searchObj.page" :limit="searchObj.limit" @pagination="paginations" />
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import Cookies from 'js-cookie'
import api from '@/api/index'
import axios from "axios";
import { changeDateFormat6, changeDateFormat3 } from "@/utils/commin";
export default {
  components: {
    Pagination
  },
  props:{
    isFirst:Boolean
  },
  data() {
    return {
      searchObj: {
        immsortId: '',
        industryId: '',
        limit: 10,
        page: 1,
        meetSponsorType: '',
        title: '',
      },
      total: 0,
      loading: false,
      returnReason: '',
      DataTable: [],
      meetSponsorTypeData: [{ name: 'A类会员', value: 3 }, { name: 'B类会员', value: 2 }, { name: 'C类会员', value: 1 },],
      industryData: [],
      immsortData: []
    }
  },
  watch:{
    isFirst(val){
      if (val==true) {
        this.React()
      }
    }
  },
  mounted() {
    var href=window.location.href
    if(href.indexOf('exportname')>-1){
      this.searchObj.title=decodeURI(href.split('exportname')[1].split('=')[1])
    }
    this.SearchList()
    this.getIndustryClassifySelectByLevel()
    this.listProductSort()
  },
  methods: {
    downloadZSH(val){
      let form={
        mid:val.mid
      }
     api.home.getInvitationLetters(form).then(res=>{
      let time=500
      res.data.forEach((item,index) => {
        setTimeout(() => {
          axios.get('https://img1.17img.cn/17img'+ item.path,{responseType:'blob'}).then(res=>{
          const blob = new Blob([res.data])
            let aLink = document.createElement('a') //动态创建一个a标签
            let evt = document.createEvent('HTMLEvents') //动态创建一个event对象
            evt.initEvent('click', true, true) //初始化一个点击事件
            aLink.download = item.name
            aLink.href =URL.createObjectURL(blob) //将blob同步到a标签的href属性上
            aLink.click() //触发点击事件        
          })
        }, time*index);
       
           });
    
     })
    },
    goSupport(val) {
      this.$router.push({ path: '/support/apply', query: { mid: val.mid } })
    },
    getIndustryClassifySelectByLevel() { //领域
      let form = {
        parentId: 0
      }
      api.common.getIndustryClassifySelectByLevel(form).then(res => {
        this.industryData = res.data.data
      })
    },
    listProductSort() { //产品
      axios(
        `https://gateway.instrument.com.cn/classificationMonitoring/classify/getPrincipleClassifySelectByParentId?parentId=0`,
        { headers: { "Content-type": "application/x-www-form-urlencoded" } }
      ).then((res) => {
        // 换成你的接口方法
        this.immsortData = res.data.data
      });
    },
    SearchList() {
      this.loading = true
      api.home.getAllCanSponsorMeeting(this.searchObj).then(res => {
        this.DataTable = res.data.records
        this.DataTable.forEach(item => {
          item.startTime2 = changeDateFormat6(item.startTime)
          item.djs = changeDateFormat3(item.startTime)
          item.isZz = changeDateFormat3(item.videoEndDate)
          switch (item.meetSponsorType) {
            case 1:
              item.meetSponsorType = 'C类会议'
              break;
            case 2:
              item.meetSponsorType = 'B类会议'
              break;
            case 3:
              item.meetSponsorType = 'A类会议'
              break;
            default:
              item.meetSponsorType = '--'
              break;
          }
        });
        this.total = res.data.total
        this.loading = false
      })
    },

    // 获取分类数据
    getclassification() {
      indexapi.DataCenter.paperSortLevel().then((res) => {
        this.classification = res.data
        this.SearchList()
      })
    },

    // 重置
    React() {
      this.searchObj = {
        imshowId: Cookies.get('imShowId')
          ? Cookies.get('imShowId')
          : '',
        keyWords: '',
        status: '',
        limit: 10,
        page: 1,
        recommend: null
      }
      this.datatime = []
      this.SearchList()
    },
    // 查询
    SearchListBt() {
      this.searchObj.limit = 10
      this.searchObj.page = 1
      this.SearchList()
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit
      this.searchObj.page = val.page
      this.SearchList()
    },
  }
}
</script>
<style scoped>
.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}

.flex_bt {
  justify-content: space-between;
}

.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}
</style>
